<script setup lang="ts">
import IRequest from "@/config/request";
import { configSetParam } from "@/utils/src/global-variable";
import { quickChat, streamChat } from "@/utils/src/coze";
import imgSrc from '@/assets/js/ImageUrlManage'
import { useMsgStore } from "@/store/modules";

const msgStore = useMsgStore()
const { msg } = storeToRefs(msgStore)
const router  = useRouter()
const list = [
  { label: '橘洲行程规划', icon: 'index1' },
  { label: '橘洲拍照打卡', icon: 'index2' },
  { label: '我有一个问题', icon: 'index3' },
  { label: '景区项目推荐', icon: 'index4' },
]
const getIcon = (icon) => {
  return imgSrc.index[icon]
}
const linkTo = (index?: number) => {
  if (index === 3) {
    router.push('/show')
  } else {
    msg.value = list[index].label
    router.push('/chat')
  }
}
const sendMsg = (info: string) => {
  msg.value = info
  router.push('/chat')
}
const showPopup = ref(false)
const routerTo = () => {
  router.push('/toMini')
}
const inputRef = ref()
onMounted(() => {
  
});
</script>
<template>
  <div class="index">
    <div class="header">
      <!-- <img src="" alt=""> -->
      <p class="header-title">橘子洲AI客服</p>
    </div>
    <img class="service" src="@/assets/images/index/service.svg"  alt=""
         @click="showPopup=true">
    <!-- <img class="topImg" src="https://jzz.tianhaochaodao.top/oss/20250604_135901.gif" alt=""> -->
    <img class="topImg" src="@/assets/images/index/top1.jpg" alt="">
    <!-- <img class="topImg" src="@/assets/images/index/top.svg" alt=""> -->
    <h2 class="slogon">在下橘子洲游玩万事通，能把你得想法和疑问，变成在橘子洲的完美体验</h2>
    <div class="moduleWrap">
      <div class="item" v-for="(item, index) in list" :key="index" @click="linkTo(index)">
        <img class="icon" :src="getIcon(item.icon)" alt="">
        <span class="label">{{ item.label }}</span>
      </div>
    </div>
    <div class="inputWrap">
      <div class="inputItem">
        <public-input ref="inputRef" type="1" @send="sendMsg" />
      </div>
      <p class="tips">内容由 AI 生成，请仔细甄别</p>
    </div>
    <van-popup v-model:show="showPopup" round>
      <div class="qrcode-wrap">
        <img class="qrcode" src="@/assets/images/index/qrcode.svg" alt="">
      </div>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.index{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 36px 16px 16px;
  box-sizing: border-box;
  background: linear-gradient( 180deg, #bdf3f3 0%, #FFFFFF 100%), rgba(0,0,0,0);
  position: relative;
  -webkit-touch-callout:none; 
  -webkit-user-select:none; 
  -moz-user-select:none; 
  -ms-user-select:none; 
  user-select:none;
  .service{
    position: absolute;
    top: 50px;
    left: 0px;
    width: 70px;
    height: 70px;
  }
  .topImg{
    width: 180px;
    height: 158px;
    display: block;
    margin: 16px auto 20px;
    // mix-blend-mode: lighten; /* 可以是 multiply, screen, overlay, darken, lighten, color-dodge, color-burn 等 */
    // margin: 0 auto 20px;
    // margin-top: -1px;
  }
  .slogon{
    font-weight: 700;
    font-size: 18px;
    color: #29898e;
    line-height: 28px;
    text-align: center;
    margin-bottom: 20px;
  }
  .moduleWrap{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    .item{
      width: calc((100% - 16px) / 2);
      height: 110px;
      // padding-top: 10px;
      box-sizing: border-box;
      background: #fff;
      // background: rgba(255,255,255,0.6) rgba(0,0,0,0.001);
      // box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15);
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .icon{
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
      }
      .label{
        font-weight: 700;
        font-size: 14px;
        color: #29898e;
        line-height: 21px;
      }
    }
  }
  .inputWrap{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    padding: 10px 16px;
    background-color: #fff;
    z-index: 10;
    text-align: center;
    .inputItem{
      width: calc(100% - 32px);
    }
  }
  .inputWrap2{
    height: 48px;
    background: #FFFFFF;
    border-radius: 24px;
    border: 1px solid #E5E7EB;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .input{
      width: calc(100% - 80px);
      height: 40px;
    }
    .voiceImg{
    }
  }
  .tips{
    font-size: 14px;
    color: #3D3D3D;
    text-align: center;
    line-height: 2;
    
  }
}
.qrcode-wrap{
  padding: 40px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  .qrcode{
    width: 161px;
    height: 159px;
  }
}

</style>